<template>
  <div class="edit">
    <el-dialog :visible.sync="dialogVisible" center class="countDialog" width="80%" :close-on-click-modal="false" @close="resetO()">
      <div slot="title" class="dialog-title">{{ pageTitle }}</div>
      <div style="margin: 10px;">
        <el-card shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            投放位置
          </div>
          <div>
            <div style="margin-bottom: 10px;">
              <el-radio-group size="mini" v-model="form.pmedia_radio" >
                <el-radio-button label="通投" ></el-radio-button>
                <el-radio-button label="首选媒体"></el-radio-button>
              </el-radio-group>
            </div>
            <div style="margin-bottom: 10px;" v-if="form.pmedia_radio === '首选媒体'">
              媒体:
              <el-select size="mini" v-model="media_arr_item" multiple collapse-tags placeholder="请选择媒体">
                <el-option v-for="item in media_arr" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              应用:
              <el-select size="mini" v-model="media_app_arr_item" multiple collapse-tags placeholder="请选择应用">
                <el-option v-for="item in media_app_arr" v-if="media_arr_item.includes(item.adx_id)" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              广告位:
              <el-select size="mini" v-model="media_slot_arr_item" multiple collapse-tags placeholder="请选择广告位" @change="dopmedia">
                <el-option v-for="item in media_slot_arr" v-if="media_app_arr_item.includes(item.mid)" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div>
              <el-table size="mini" :data="form.pmedia" border style="width: 100%" max-height="250">
                <el-table-column prop="media_name" label="媒体名称"></el-table-column>
                <el-table-column prop="app_name" label="应用名称"></el-table-column>
                <el-table-column prop="slot_name" label="广告位名称"></el-table-column>
                <el-table-column fixed="right" label="操作" >
                  <template slot-scope="scope">
                    <el-button @click="deleteRow(scope.row.slot_id)" type="text" size="small">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            排期与预算
          </div>
          <div>
            <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px;">投放周期</div>
            <div>
              <el-radio-group size="mini" v-model="form.psta_radio">
                <el-radio-button label="从今天起长期投放" ></el-radio-button>
                <el-radio-button label="设置开始和结束日期"></el-radio-button>
              </el-radio-group>
            </div>
            <div style="margin-top: 10px;" v-if="form.psta_radio==='设置开始和结束日期'">
              <el-date-picker size="mini" v-model="sectimes" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd">
              </el-date-picker>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">投放时段</div>
            <div>
              <el-radio-group size="mini" v-model="form.ptms_radio">
                <el-radio-button label="不限" ></el-radio-button>
                <el-radio-button label="指定时段"></el-radio-button>
              </el-radio-group>
            </div>
            <div style="margin-top: 10px;" v-if="form.ptms_radio==='指定时段'">
              <div>
                <table style="text-align: center; width: 100%; border-collapse: collapse; ">
                  <thead>
                  <tr>
                    <th class="ptmsCll" rowspan="2">周/时</th>
                    <th class="ptmsCll" colspan="24">00:00~12:00</th>
                    <th class="ptmsCll" colspan="24">12:00~24:00</th>
                  </tr>
                  <tr>
                    <th class="ptmsCll" colspan="2">00</th>
                    <th class="ptmsCll" colspan="2">01</th>
                    <th class="ptmsCll" colspan="2">02</th>
                    <th class="ptmsCll" colspan="2">03</th>
                    <th class="ptmsCll" colspan="2">04</th>
                    <th class="ptmsCll" colspan="2">05</th>
                    <th class="ptmsCll" colspan="2">06</th>
                    <th class="ptmsCll" colspan="2">07</th>
                    <th class="ptmsCll" colspan="2">08</th>
                    <th class="ptmsCll" colspan="2">09</th>
                    <th class="ptmsCll" colspan="2">10</th>
                    <th class="ptmsCll" colspan="2">11</th>
                    <th class="ptmsCll" colspan="2">12</th>
                    <th class="ptmsCll" colspan="2">13</th>
                    <th class="ptmsCll" colspan="2">14</th>
                    <th class="ptmsCll" colspan="2">15</th>
                    <th class="ptmsCll" colspan="2">16</th>
                    <th class="ptmsCll" colspan="2">17</th>
                    <th class="ptmsCll" colspan="2">18</th>
                    <th class="ptmsCll" colspan="2">19</th>
                    <th class="ptmsCll" colspan="2">20</th>
                    <th class="ptmsCll" colspan="2">21</th>
                    <th class="ptmsCll" colspan="2">22</th>
                    <th class="ptmsCll" colspan="2">23</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td class="ptmsCll">星期一</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'one')" >
                      <div v-if="ptms_one[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_one[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ptmsCll">星期二</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'two')" >
                      <div v-if="ptms_two[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_two[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ptmsCll">星期三</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'the')" >
                      <div v-if="ptms_the[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_the[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ptmsCll">星期四</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'fon')" >
                      <div v-if="ptms_fon[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_fon[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ptmsCll">星期五</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'fiv')" >
                      <div v-if="ptms_fiv[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_fiv[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ptmsCll">星期六</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'sey')" >
                      <div v-if="ptms_sey[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_sey[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  <tr>
                    <td class="ptmsCll">星期日</td>
                    <td class="ptmsCll" v-for="n in 48" @click="ckbox(n-1,'sun')" >
                      <div v-if="ptms_sun[n-1]" style="width: 100%;height: 100%; background-color: #0057ff;"></div>
                      <div v-if="!ptms_sun[n-1]" style="width: 100%;height: 100%; "></div>
                    </td>
                  </tr>
                  </tbody>
                </table>

              </div>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            第三方监测链接
          </div>
          <div>
            <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px;">展示监测链接</div>
            <div>
              <el-input size="mini" v-model="form.tracks_pv" placeholder="请输入链接地址"></el-input>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">点击监测链接</div>
            <div>
              <el-input size="mini" v-model="form.tracks_click" placeholder="请输入链接地址"></el-input>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">视频开始播放监测链接</div>
            <div>
              <el-input size="mini" v-model="form.tracks_vd_start" placeholder="请输入链接地址"></el-input>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">视频播放完毕监测链接</div>
            <div>
              <el-input size="mini" v-model="form.tracks_vd_end" placeholder="请输入链接地址"></el-input>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">唤起监测链接</div>
            <div>
              <el-input size="mini" v-model="form.tracks_dpsc" placeholder="请输入链接地址"></el-input>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
            基础设置
          </div>
          <div>
            <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px;">选择广告主</div>
            <div>
              <el-select size="mini" v-model="form.advId" placeholder="请选择所属广告主">
                <el-option v-for="item in adv_arr" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">计划名称</div>
            <div>
              <el-input size="mini" v-model="form.name" placeholder="计划名称"></el-input>
            </div>
            <div style="font-size: 14px; font-weight: bold; margin-top: 20px; margin-bottom: 10px;">日预算</div>
            <div>
              <el-input-number size="mini" v-model="form.budget" min="0" precision="2" step="0.01" max="100000" placeholder="日预算:元"></el-input-number>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px;" shadow="hover">
          <div style="width: 100%; text-align: center">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="onSubmit()" plain>提交</el-button>
            <el-button size="mini" type="info" icon="el-icon-message" @click="resetO()" plain>取消</el-button>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {dsp_adv_plan_add, dsp_adv_plan_edit, dsp_adv_plan_list} from '@/api/dsp_adv_plan'
import {dsp_media_all} from '@/api/dsp_media'
import {dsp_media_app_all} from '@/api/dsp_media_app'
import {dsp_media_slot_all} from '@/api/dsp_media_slot'
import {dsp_adv_all} from '@/api/dsp_advertiser'
import {DateFormat, GenRanSrt} from "@/utils/tools"
export default {
  name: 'dsp_adv_plan-edit',
  data(){
    return {
      dialogVisible: false,
      pageTitle:'新增',
      adv_arr:[],
      media_arr:[],
      media_arr_item:[],
      media_app_arr:[],
      media_app_arr_item:[],
      media_slot_arr:[],
      media_slot_arr_item:[],
      sectimes:[new Date().setTime(new Date().getTime()  ),new Date().setTime(new Date().getTime() + 3600 * 1000 * 24 * 2)],
      form:{
        pmedia_radio:'通投',
        psta_radio:'从今天起长期投放',
        pmedia:[],
        ptms_radio:'不限',
        ptms:{
          one:[],
          two:[],
          the:[],
          fon:[],
          fiv:[],
          sey:[],
          sun:[],
        },
        advId:'',
        budget:0,
        tracks_pv:'',
        tracks_click:'',
        tracks_vd_start:'',
        tracks_vd_end:'',
        tracks_dpsc:'',
      },
      ptms_one:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],
      ptms_two:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],
      ptms_the:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],
      ptms_fon:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],
      ptms_fiv:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],
      ptms_sey:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],
      ptms_sun:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,false,],

        rules:{
        name:[
          {required: true, message: '请输入名称', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
  },
  components: {

  },
  mounted(){
  },
  created() {
    this.get_media_arr()//获取所有媒体
  },
  methods: {
    resetO(){
      this.form = {
        pmedia_radio:'通投',
        psta_radio:'从今天起长期投放',
        pmedia:[],
        ptms_radio:'不限',
        ptms:{
          one:[],
          two:[],
          the:[],
          fon:[],
          fiv:[],
          sey:[],
          sun:[],
        },
        advId:'',
        budget:0,
        tracks_pv:'',
        tracks_click:'',
        tracks_vd_start:'',
        tracks_vd_end:'',
        tracks_dpsc:'',
      }
      this.dialogVisible = false
    },
    ckbox(n,v){
      var tmp = false
      if (v === "one") {
        tmp = this.ptms_one[n]
        this.$set(this.ptms_one,n,!tmp)
      }
      if (v === "two") {
        tmp = this.ptms_two[n]
        this.$set(this.ptms_two,n,!tmp)
      }
      if (v === "the") {
        tmp = this.ptms_the[n]
        this.$set(this.ptms_the,n,!tmp)
      }
      if (v === "fon") {
        tmp = this.ptms_fon[n]
        this.$set(this.ptms_fon,n,!tmp)
      }
      if (v === "fiv") {
        tmp = this.ptms_fiv[n]
        this.$set(this.ptms_fiv,n,!tmp)
      }
      if (v === "sey") {
        tmp = this.ptms_sey[n]
        this.$set(this.ptms_sey,n,!tmp)
      }
      if (v === "sun") {
        tmp = this.ptms_sun[n]
        this.$set(this.ptms_sun,n,!tmp)
      }
    },
    //获取所有媒体
    get_media_arr(){
      //广告主
      dsp_adv_all({
        ids:"",
      }).then(res => {
        var data = res.data
        this.adv_arr = data
      }).catch(err => {
        console.log(err)
      })
      //媒体
      dsp_media_all({
        ids:"",
      }).then(res => {
        var data = res.data
        this.media_arr = data
      }).catch(err => {
        console.log(err)
      })
      //应用
      dsp_media_app_all({
        ids:"",
      }).then(res => {
        var data = res.data
        this.media_app_arr = data
      }).catch(err => {
        console.log(err)
      })
      //广告位
      dsp_media_slot_all({
        ids:"",
      }).then(res => {
        var data = res.data
        this.media_slot_arr = data
      }).catch(err => {
        console.log(err)
      })
    },
    deleteRow(slot_id) {
      var tmp = []
      for (let i=0; i<this.form.pmedia.length; i++) {
        var tmp_item = this.form.pmedia[i]
        if (tmp_item.slot_id === slot_id) {
          continue
        }
        tmp.push(tmp_item)
      }
      this.form.pmedia = tmp
    },
    dopmedia(){
      var pmedia = []
      if (this.media_slot_arr_item.length && this.media_slot_arr_item.length > 0){
        for (let i = 0; i < this.media_slot_arr_item.length; i++) {
          var istr = this.ckMediaTab(this.media_slot_arr_item[i])
          if (istr) {//存在直接跳过
            continue
          }
          var slot_info = this.GetObjName(this.media_slot_arr_item[i],this.media_slot_arr)
          var media_info = this.GetObjName(slot_info.adx_id,this.media_arr)
          var app_info = this.GetObjName(slot_info.mid,this.media_app_arr)
          var tmp_item = {
            media_id:media_info.id,
            media_name:media_info.name,
            app_id:app_info.id,
            app_name:app_info.name,
            slot_id:slot_info.id,
            slot_name:slot_info.name,
          }
          pmedia.push(tmp_item)
        }
      }
      this.form.pmedia = pmedia
    },
    GetObjName(a,b){
      for (let i = 0; i < b.length; i++) {
        var tmp = b[i];
        if (tmp.id === a){
          return tmp
        }
      }
      return {}
    },
    ckMediaTab(a){
      if (this.form.pmedia && this.form.pmedia.length && this.form.pmedia.length > 0 ){
        for (let i = 0; i < this.form.pmedia.length; i++) {
          var tmp = this.form.pmedia[i];
          if (tmp.slot_id === a){
            return true
          }
        }
      }
      return false
    },
    onSubmit(){
      var sdata = this.form
      sdata.flag = parseInt(sdata.flag)
      if (!sdata.advId) {
        this.$message({
          showClose: true,
          center:true,
          message: '所属广告主必填',
          type: 'error'
        })
        return false
      }
      if (sdata.pmedia_radio === "首选媒体" && sdata.pmedia.length === 0){
        this.$message({
          showClose: true,
          center:true,
          message: '首选媒体未设置',
          type: 'error'
        })
        return false
      }
      if (sdata.psta_radio === "设置开始和结束日期"){
        sdata.psta = DateFormat(this.sectimes[0],'YYYY-mm-dd')
        sdata.pend = DateFormat(this.sectimes[1],'YYYY-mm-dd')
      }
      if (sdata.ptms_radio === "指定时段") {
        sdata.ptms.one = this.ptms_one
        sdata.ptms.two = this.ptms_two
        sdata.ptms.the = this.ptms_the
        sdata.ptms.fon = this.ptms_fon
        sdata.ptms.fiv = this.ptms_fiv
        sdata.ptms.sey = this.ptms_sey
        sdata.ptms.sun = this.ptms_sun
      }
      this.SObj(sdata).then(res => {
        var data = res.data
        console.log(data)
        this.$message({
          showClose: true,
          center:true,
          message: '操作成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.$parent.GetList()
        this.resetO()
      }).catch(err => {
        console.log(err)
      })
    },
    SObj(sdata){
      if (sdata.id == undefined || sdata.id == ''){
        return dsp_adv_plan_add(sdata)
      }else {
        return dsp_adv_plan_edit(sdata)
      }
    },
    getmid(){
      return GenRanSrt(6)
    },
    showInfo(info){
      this.dialogVisible = true
      if (info.id != undefined) {
        this.pageTitle = '编辑'
        if (info.ptms.one && info.ptms.one.length>0){
          this.ptms_one = info.ptms.one
        }
        if (info.ptms.two && info.ptms.two.length>0){
          this.ptms_two = info.ptms.two
        }
        if (info.ptms.the && info.ptms.the.length>0){
          this.ptms_the = info.ptms.the
        }
        if (info.ptms.fon && info.ptms.fon.length>0){
          this.ptms_fon = info.ptms.fon
        }
        if (info.ptms.fiv && info.ptms.fiv.length>0){
          this.ptms_fiv = info.ptms.fiv
        }
        if (info.ptms.sey && info.ptms.sey.length>0){
          this.ptms_sey = info.ptms.sey
        }
        if (info.ptms.sun && info.ptms.sun.length>0){
          this.ptms_sun = info.ptms.sun
        }
        this.form = info
      }
    }
  }
}
</script>

<style lang="scss">
.ptmsCll-active {
    background-color: #0057ff;
  }
</style>
<style lang="scss" scoped>
.edit {

}
.ptmsCll {
  border: 1px solid #8c939d;
  height: 26px;
}
.ptmsCll-active {
  background-color: #0057ff;
}
</style>